<div class="content-section introduction">
    <div>
        <span class="feature-title">Charts</span>
        <span>Chart components are based on <a style="color:#68d4f9" href="http://www.chartjs.org/">Charts.js</a> 2.1.x, an open source HTML5 based charting library.</span>
    </div>
</div>

<div class="content-section documentation">
    <h3 style="margin-top:0px">Chart Component</h3>
    <p>Chart component is used to display a chart on page. The classname is UIChart and element tag is p-chart.</p>
    
<h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;ChartModule&#125; from 'primeng/primeng';
</code>
</pre>

    <h3>Charts.js</h3>
    <p>In order for chart component to work, include charts.js to your project. An example with CLI would be;</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
"scripts": [
  "../node_modules/chart.js/dist/Chart.js",
  //..others
],
</code>
</pre>
    

    <h3 style="margin-top:0px">Change Detection</h3>
    <p>In order to chart to redraw itself, a new data object needs to be created. Changing the array contents without creating a new
    array instance does not trigger change detection.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-chart type="pie" [data]="data"&gt;&lt;/p-chart&gt;
&lt;button type="button" pButton (click)="update($event)"&gt;&lt;/button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
update(event: Event) &#123;
    this.data = //create new data
&#125;
</code>
</pre>

<p>Attributes of Chart Component.</p>
<div class="doc-tablewrapper">
    <table class="doc-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>type</td>
                <td>string</td>
                <td>null</td>
                <td>Type of the chart.</td>
            </tr>
            <tr>
                <td>data</td>
                <td>any</td>
                <td>null</td>
                <td>Data to display.</td>
            </tr>
            <tr>
                <td>options</td>
                <td>any</td>
                <td>null</td>
                <td>Options to customize the chart.</td>
            </tr>
            <tr>
                <td>width</td>
                <td>string</td>
                <td>null</td>
                <td>Width of the chart in non-responsive mode.</td>
            </tr>
            <tr>
                <td>height</td>
                <td>string</td>
                <td>null</td>
                <td>Height of the chart in non-responsive mode.</td>
            </tr>
            <tr>
                <td>onDataSelect</td>
                <td>function</td>
                <td>null</td>
                <td>Callback to execute when an element on chart is clicked.</td>
            </tr>
        </tbody>
    </table>
</div>

<h3>Methods</h3>
<div class="doc-tablewrapper">
    <table class="doc-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Parameters</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>refresh</td>
                <td>-</td>
                <td>Redraws the graph with new data.</td>
            </tr>
            <tr>
                <td>reinit</td>
                <td>-</td>
                <td>Destroys the graph first and then creates it again.</td>
            </tr>
            <tr>
                <td>generateLegend</td>
                <td>-</td>
                <td>Returns an HTML string of a legend for that chart. The legend is generated from the legendCallback in the options.</td>
            </tr>
        </tbody>
    </table>
</div>

<h3>Chart Types</h3>
<p>Chart type is defined using the type property. Currently there are 6 options available; pie, doughtnut, line(line or horizontalBar), bar, radar and polarArea.</p>

<h3>Data</h3>
<p>Data of a chart is provided using a binding to the data property, each type has its own format of data. Here is an example of a line chart.</p>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-chart type="line" [data]="data"&gt;&lt;/p-chart&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class LineChartDemo &#123;

    data: any;
    
    constructor() &#123;
        this.data = &#123;
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                &#123;
                    label: 'First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40]
                &#125;,
                &#123;
                    label: 'Second Dataset',
                    data: [28, 48, 40, 19, 86, 27, 90]
                &#125;
            ]
        &#125;
    &#125;
&#125;
</code>
</pre>

<h3>Options</h3>
<p>While a series can be customized per dataset, general chart options are defined with options property. 
    Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.</p>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-chart type="line" [data]="data" [options]="options"&gt;&lt;/p-chart&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class LineChartDemo &#123;

    data: any;
    
    options: any;
    
    constructor() &#123;
        this.data = &#123;
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                &#123;
                    label: 'First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40]
                &#125;,
                &#123;
                    label: 'Second Dataset',
                    data: [28, 48, 40, 19, 86, 27, 90]
                &#125;
            ]
        &#125;
        
        this.options = &#123;
            title: &#123;
                display: true,
                text: 'My Title',
                fontSize: 16
            &#125;,
            legend: &#123;
                position: 'bottom'
            &#125;
        &#125;;
    &#125;
&#125;
</code>
</pre>

<h3>Events</h3>
<p>When data is selected with click event, chart component provides onDataSelect callback to process the selected data.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-chart type="line" [data]="data" (onDataSelect)="selectData($event)"&gt;&lt;/p-chart&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
selectData(event) &#123;
    //event.dataset = Selected dataset
    //event.element = Selected element
    //event.element._datasetIndex = Index of the dataset in data
    //event.element._index = Index of the data in dataset
&#125;
</code>
</pre>  


</div>
